<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<link rel="icon" type="image/x-icon" href="/favicon.ico" th:href="@{/favicon.ico}" >
	<title>设备注册</title>
		
</head>
<body>
<!--头部-->
<header th:replace="common/head" >
</header> 
<!-- 页面指向 -->
<div class="page-point bg-white">
	<ul>
		<li>首页</li>
		<li>设备管理</li>
		<li>设备注册</li>  
	</ul>
</div>
<!-- 菜单树 -->
<div th:replace="common/left" > 
</div>
<!-- 底部 -->
<div th:replace="common/foot" > 
</div>



<!--主体内容-->
<div class="page-container">

	<div class="container-fluid mb-20 clearfix">
		<div class="col-md-12">
			<h2 class="page-section-title">查询条件</h2>
		</div>
	</div>

	<div class="container-fluid query-frame-wrap mb-10 clearfix">
		<div class="col-lg-3">
			<div class="query-frame">
				<label>设备型号</label>
				<select id="emModelReg" class="queryRegister queryEuqipModel">
					<option th:value="${modelCode}" th:text="${modelCode}"></option>
				</select>
			</div>
		</div>
		<div class="col-lg-3">
			<div class="query-frame">
				<label>设备编号</label>
				<input autocomplete="new-password" type="text" class="form-control" id="equipCodeReg"/>
			</div>
		</div>
		<div class="col-lg-3">
			<div class="query-frame">
				<label>设备名称</label>
				<input autocomplete="new-password" type="text" class="form-control" id="equipNameReg"/>
			</div>
		</div>
		<div class="col-lg-3">
			<div class="query-frame query-button">
				<img th:src="@{/image/search.png}" id="queryRegister"/>
				<img th:src="@{/image/rest.png}" id="resetRegister" class="reset"/>
			</div>
		</div>
	</div>

	<div class="container-fluid mb-20 clearfix">
		<div class="col-md-12 rlt">
			<h2 class="page-section-title">设备列表</h2>
			<ul class="table-tool">
			    <li id="addRegister">
			        <span class="icon-list_add" aria-hidden="true"></span>
			        <label>新增</label>
			    </li>
			    <li id="updateRegister">
			        <span class="icon-list_xiugai" aria-hidden="true"></span>
			        <label>修改</label>
			    </li>
			    <li id="delRegister">
			        <span class="icon-list_shanchu" aria-hidden="true"></span>
			        <label>删除</label>
			    </li>
			    <li class="last" id="refreshRegister">
			        <span class="icon-list_shuaxin" aria-hidden="true"></span>
			        <label>刷新</label>
			    </li>
			</ul>
		</div>
	</div>

	<div class="container-fluid table-container">
		<table id="registerTable">

		</table>
	</div>
</div>

<!--模态框-表单验证和文件上传-->
<div class="modal fade registerForm" id="myModal" tabindex="-1" role="dialog" data-backdrop="static" data-keyboard="false">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Newly added</h4>
      </div>
      <div class="modal-body">
		    <div class="row">
		        <div class="col-lg-12">
		            <form id="defaultForm" method="" class="form-horizontal" action="">
		                <div class="form-group">
		                    <label class="col-lg-3 control-label form-required form-required-4">设备型号</label>
		                    <div class="col-lg-7">
		                    	<select name="modelCode" class="form-control emModelName">
		                    		<option value="">请选择</option>
		                    	</select>
		                    </div>
		                </div>
		                <div class="form-group">
		                    <label class="col-lg-3 control-label form-required form-required-4">设备类别</label>
		                    <div class="col-lg-7">
		                    	<input autocomplete="new-password" type="text" class="form-control" name="modelType" value="" />
		                    </div>
		                </div>
		                <div class="form-group">
		                    <label class="col-lg-3 control-label form-required form-required-3">供应商</label>
		                    <div class="col-lg-7">
		                    	<input autocomplete="new-password" type="text" class="form-control" name="supplier" value="" />
		                    </div>
		                </div>
		                <div class="form-group">
		                    <label class="col-lg-3 control-label form-required form-required-4">采集方式</label>
		                    <div class="col-lg-7">
		 						<input autocomplete="new-password" type="text" class="form-control" name="collectionType" value="" />
		                    </div>
		                </div>
		                
		                <div class="form-group plcProtocal">
		                    <label class="col-lg-3 control-label form-required form-required-6">PLC采集协议</label>
		                    <div class="col-lg-7">
		                    	<input autocomplete="new-password" type="text" class="form-control" name="plcProtocal" value="" />
		                    </div>
		                </div>
		                <div class="form-group operationDiv" style="display:none">
		                    <label class="col-lg-3 control-label form-required form-required-2">工序</label>
		                    <div class="col-lg-7"> 
		                    	<select name="operationName" class="form-control operation">
		                    	</select>
		                    </div>
		                </div>
		                <div class="form-group">
		                    <label class="col-lg-3 control-label form-required form-required-4">设备编号</label>
		                    <div class="col-lg-7">
		                    	<input autocomplete="new-password" class="form-control" type="text" name="equipCode" value="" />
		                    </div>
		                </div>
		                <div class="form-group">
		                    <label class="col-lg-3 control-label form-required form-required-4">设备名称</label>
		                    <div class="col-lg-7">
		                    	<input autocomplete="new-password" class="form-control" type="text" name="equipName" value="" />
		                    </div>
		                </div>
		                <div class="form-group">
		                    <label class="col-lg-3 control-label">设备英文名</label>
		                    <div class="col-lg-7">
		                    	<input autocomplete="new-password" class="form-control" type="text" name="equipNameEn" value="" />
		                    </div>
		                </div>
		                
		                <div class="form-group">
		                    <label class="col-lg-3 control-label form-required form-required-4">通讯编码</label>
		                    <div class="col-lg-7">
		                    	<input autocomplete="new-password" class="form-control" type="text" name="equipCodeName" value="" />
		                    </div>
		                </div>
		                <div class="form-group">
		                    <label class="col-lg-3 control-label form-required form-required-4">协议编码</label>
		                    <div class="col-lg-7">
		                    	<input autocomplete="new-password" class="form-control" type="text" name="protocalCode" value="" />
		                    </div>
		                </div>
		                <div class="form-group uploadFile">
		                    <label class="col-lg-3 control-label form-required form-required-4">文件上传</label>
		                    <div class="col-lg-7 ">
		                    	<input autocomplete="new-password" type="file" id="uploadfile" name="file" />
		                    	<input autocomplete="new-password" type="hidden" id="uploadfilePath" name="filePath"/>
		                    </div>
		                    
		                </div>
		                <div class="error-tips" style="padding-left: 155px;color: red;display:none">请先上传图片</div>
           				<!-- 隐藏唯一id -->
						<input autocomplete="new-password" type="hidden" name="pkId" value="" />
		            </form>
		        </div>
		    </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary yes">保存</button>
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
      </div>
    </div>
  </div>
</div>


<script th:src="@{/js/equipment/register/register.js}" src="../../static/js/equipment/register/register.js"></script>

<script type="text/javascript">

$(function () {

//--------------------------------------------搜索下拉框设置--------------------------------------------
    $('#e21').select2({});
	$('#modal-select').select2({});
//--------------------------------------------文件上传设置--------------------------------------------
	$("#uploadfile").fileinput({

        language: 'zh', //设置语言

        uploadUrl: ctx +'/equipment/register/savePhoto/save.mvc', //上传的地址

       allowedFileExtensions: ['jpg', 'gif', 'png'],//接收的文件后缀

       //uploadExtraData:{"id": 1, "fileName":'123.mp3'},

        uploadAsync: true, //默认异步上传

        showUpload: false, //是否显示上传按钮
        showRemove :false, //显示移除按钮

        showPreview : true, //是否显示预览

        showCaption:false,//是否显示标题

       browseClass:"btn btn-primary", //按钮样式    

       dropZoneEnabled: false,//是否显示拖拽区域

        maxFileSize:300,//单位为kb，如果为0表示不限制文件大小

        maxFileCount: 1, //表示允许同时上传的最大文件个数

        enctype:'multipart/form-data',

       validateInitialCount:false,

        previewFileIcon: "<iclass='glyphicon glyphicon-king'></i>",

       msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！",

   }).on("fileuploaded", function (event, data, previewId, index){//上传成功后立即执行
	   console.log(data.response.path);
   		$('.btn-file').hide();
	   $("#uploadfilePath").val(data.response.path);
	   $(".error-tips").css("display","none");
	//   $(".file-input-new").attr("disabled",true);
   }).on('filesuccessremove', function(event, id) {//点击删除后立即执行  
		  console.log("del");
		  $('.btn-file').show();
		$("#uploadfilePath").val("");
		$(".error-tips").css("display","block");
		});  
})

</script>
</body>
</html>